import React from 'react'
import { TemperatureInput } from './TemperatureInput'

export class Calculator extends React.Component {
	constructor(props) {
		super(props)
		this.handleChange = this.handleChange.bind(this)
		this.state = { temperature: '', scale: 'c' }
	}

	handleChange(value, type) {
		console.log('===>>>', value)
		this.setState({ temperature: value, scale: type })
	}

	render() {
		const scale = this.state.scale
		const temperature = this.state.temperature
		const fahrenheit = scale === 'c' ? tryConvert(temperature, toFahrenheit) : temperature
		const celsius = scale === 'f' ? tryConvert(temperature, toCelsius) : temperature
		return (
			// <fieldset>
			// 	<legend>Enter temperature in Celsius:</legend>
			// 	<input value={temperature} onChange={this.handleChange} />
			// 	<BoilingVerdict celsius={parseFloat(temperature)} />
			// </fieldset>
			<div>
				<TemperatureInput scale="c" temperature={celsius} onTemperature={this.handleChange} />
				<TemperatureInput scale="f" temperature={fahrenheit} onTemperature={this.handleChange} />
			</div>
		)
	}
}

// function BoilingVerdict(props) {
// 	if (props.celsius >= 100) {
// 		return <p>The water would boil.</p>
// 	}
// 	return <p>The water would not boil.</p>
// }

function toCelsius(fahrenheit) {
	return ((fahrenheit - 32) * 5) / 9
}

function toFahrenheit(celsius) {
	return (celsius * 9) / 5 + 32
}

function tryConvert(temperature, convert) {
	const input = parseFloat(temperature)
	if (Number.isNaN(input)) {
		return ''
	}
	const output = convert(input)
	const rounded = Math.round(output * 1000) / 1000
	return rounded.toString()
}
